<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>HTML5 3D动画标签云代码</title>
		<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
		<style type="text/css">
			#tag-cloud {
				width: 640px;
				height: 480px;
				margin: 50px auto;
			}
			@font-face {
				font-family: 'icomoon';
				src:url('../fonts/icomoon.eot?rretjt');
				src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
					url('../fonts/icomoon.woff?rretjt') format('woff'),
					url('../fonts/icomoon.ttf?rretjt') format('truetype'),
					url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
			}
			
			[class^="icon-"], [class*=" icon-"] {
				font-family: 'icomoon';
				speak: none;
				font-style: normal;
				font-weight: normal;
				font-variant: normal;
				text-transform: none;
				line-height: 1;
			
				/* Better Font Rendering =========== */
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			
			body, html { font-size: 100%; 	padding: 0; margin: 0;}
			
			/* Reset */
			*,
			*:after,
			*:before {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
			.clearfix:before,
			.clearfix:after {
				content: " ";
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			body{
				background: #494A5F;
				color: #D5D6E2;
				font-weight: 500;
				font-size: 1.05em;
				font-family: "Microsoft YaHei","å®‹ä½“","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
			}
			a{color: #2fa0ec;text-decoration: none;outline: none;}
			a:hover,a:focus{color:#74777b;}
			
			.zzsc-container{
				margin: 0 auto;
				overflow: hidden;
			}
			
			.bgcolor-1 { background: #f0efee; }
			.bgcolor-2 { background: #f9f9f9; }
			.bgcolor-3 { background: #e8e8e8; }/*light grey*/
			.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
			.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
			.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
			.bgcolor-7 { background: #d0d6d6; }/*White tea*/
			.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
			.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
			.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
			.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
			.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
			.bgcolor-20{ background: #494A5F;color: #D5D6E2;}
			/* Header */
			.zzsc-header{
				padding: 1em 190px 1em;
				letter-spacing: -1px;
				text-align: center;
				background: #66677c;
			}
			.zzsc-header h1 {
				color: #D5D6E2;
				font-weight: 600;
				font-size: 2em;
				line-height: 1;
				margin-bottom: 0;
				font-family: "Microsoft YaHei","å®‹ä½“","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
			}
			.zzsc-header h1 span {
				font-family: "Microsoft YaHei","å®‹ä½“","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
				display: block;
				font-size: 60%;
				font-weight: 400;
				padding: 0.8em 0 0.5em 0;
				color: #c3c8cd;
			}
			/*nav*/
			.zzsc-demo a{color: #fff;text-decoration: none;}
			.zzsc-demo{width: 100%;padding-bottom: 1.2em;}
			.zzsc-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
			.zzsc-demo a:hover{opacity: 0.6;}
			.zzsc-demo a.current{background:#1d7db1;color: #fff; }
			/* Top Navigation Style */
			.zzsc-links {
				position: relative;
				display: inline-block;
				white-space: nowrap;
				font-size: 1.5em;
				text-align: center;
			}
			
			.zzsc-links::after {
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -1px;
				width: 2px;
				height: 100%;
				background: #dbdbdb;
				content: '';
				-webkit-transform: rotate3d(0,0,1,22.5deg);
				transform: rotate3d(0,0,1,22.5deg);
			}
			
			.zzsc-icon {
				display: inline-block;
				margin: 0.5em;
				padding: 0em 0;
				width: 1.5em;
				text-decoration: none;
			}
			
			.zzsc-icon span {
				display: none;
			}
			
			.zzsc-icon:before {
				margin: 0 5px;
				text-transform: none;
				font-weight: normal;
				font-style: normal;
				font-variant: normal;
				font-family: 'icomoon';
				line-height: 1;
				speak: none;
				-webkit-font-smoothing: antialiased;
			}
			/* footer */
			.zzsc-footer{width: 100%;padding-top: 10px;}
			.zzsc-small{font-size: 0.8em;}
			.center{text-align: center;}
			/****/
			.related {
				color: #fff;
				background: #494A5F;
				text-align: center;
				font-size: 1.25em;
				padding: 0.5em 0;
				overflow: hidden;
			}
			
			.related > a {
				vertical-align: top;
				width: calc(100% - 20px);
				max-width: 340px;
				display: inline-block;
				text-align: center;
				margin: 20px 10px;
				padding: 25px;
				font-family: "Microsoft YaHei","å®‹ä½“","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
			}
			.related a {
				display: inline-block;
				text-align: left;
				margin: 20px auto;
				padding: 10px 20px;
				opacity: 0.8;
				-webkit-transition: opacity 0.3s;
				transition: opacity 0.3s;
				-webkit-backface-visibility: hidden;
			}
			
			.related a:hover,
			.related a:active {
				opacity: 1;
			}
			
			.related a img {
				max-width: 100%;
				opacity: 0.8;
				border-radius: 4px;
			}
			.related a:hover img,
			.related a:active img {
				opacity: 1;
			}
			.related h3{font-family: "Microsoft YaHei", sans-serif;}
			.related a h3 {
				font-weight: 300;
				margin-top: 0.15em;
				color: #fff;
			}
			/* icomoon */
			.icon-zzsc-home-outline:before {
				content: "\e5000";
			}
			
			.icon-zzsc-arrow-forward-outline:before {
				content: "\e5001";
			}
			
			@media screen and (max-width: 50em) {
				.zzsc-header {
					padding: 3em 10% 4em;
				}
				.zzsc-header h1 {
			        font-size:2em;
			    }
			}
			
			
			@media screen and (max-width: 40em) {
				.zzsc-header h1 {
					font-size: 1.5em;
				}
			}
			
			@media screen and (max-width: 30em) {
			    .zzsc-header h1 {
			        font-size:1.2em;
			    }
			}
		</style>
	</head>
	<body>
		<div class="zzsc-container">
			<div id='tag-cloud'></div>
		</div>
		<script src="../商城相关/js/jq.js" type="text/javascript"></script>
		<script src="./js/jquery.svg3dtagcloud.min.js"></script>
		<script>
			$(document).ready(function() {
				var entries = [{
						label: 'Back to top',
						url: '#',
						target: '_top'
					},
					{
						label: 'Bootstrap',
						url: '#',
						target: '_top'
					},
					{
						label: 'Carousel',
						url: '#',
						target: '_top'
					},
					{
						label: 'Countdown',
						url: '#',
						target: '_top'
					},
					{
						label: 'Dropdown Menu',
						url: '#',
						target: '_top'
					},
					{
						label: 'CodePen',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'three.js',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Form Validation',
						url: '#',
						target: '_top'
					},
					{
						label: 'JS Compress',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'TinyPNG',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Can I Use',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'URL shortener',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Grid Layout',
						url: '#',
						target: '_top'
					},
					{
						label: 'Twitter',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'deviantART',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Gulp',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Browsersync',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'GitHub',
						url: 'https://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Shadertoy',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Tree View',
						url: '#',
						target: '_top'
					},
					{
						label: 'jsPerf',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Foundation',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'CreateJS',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Velocity.js',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'TweenLite',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'jQuery',
						url: 'http://www.lanrenzhijia.com/',
						target: '_top'
					},
					{
						label: 'Notification',
						url: '#',
						target: '_top'
					},
					{
						label: 'Parallax',
						url: '#',
						target: '_top'
					}
				];

				var settings = {

					entries: entries,
					width: 640,
					height: 480,
					radius: '65%',
					radiusMin: 75,
					bgDraw: true,
					bgColor: '#494A5F',
					opacityOver: 1.00,
					opacityOut: 0.05,
					opacitySpeed: 6,
					fov: 800,
					speed: 0.5,
					fontFamily: 'Oswald, Arial, sans-serif',
					fontSize: '15',
					fontColor: '#fff',
					fontWeight: 'normal', //bold
					fontStyle: 'normal', //italic 
					fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
					fontToUpperCase: true

				};

				//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
				$('#tag-cloud').svg3DTagCloud(settings);

			});
		</script>

	</body>
</html>
